<template>
  <BaseContainer>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="onTabClick" tabPosition="left">
      <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">
        <component ref="crud" v-if="tabName == item.name" :is="item.component" :ifShowSearch="props.ifShowSearch"   :isWithAuth="props.isWithAuth"></component>
      </el-tab-pane>
    </el-tabs>
  </BaseContainer>
</template>

<script setup lang="ts">
import {ref} from 'vue'

import HonorOldGold from './HonorOldGold/index.vue'
import InstitutionOperationSubsidies from './InstitutionOperationSubsidies/index.vue'
import MedicalInstitutionalSubsidies from './MedicalInstitutionalSubsidies/index.vue'
import PractitionerPersonnelSubsidies from './PractitionerPersonnelSubsidies/index.vue'
import OldUniversitySubsidies from './OldUniversitySubsidies/index.vue'
import FiveCategoriesOldSubsidies from './FiveCategoriesOldSubsidies/index.vue'
import LevelUpSubsidies from './LevelUpSubsidies/index.vue'
import HomeBedSubsidy from './HomeBedSubsidy/index.vue'
import BedConstructionSubsidies from './BedConstructionSubsidies/index.vue'

type Props = {
  ifShowSearch?:any
  isWithAuth?:any
}
const props = withDefaults(defineProps<Props>(), {
  ifShowSearch:true,
  isWithAuth:undefined
})

let activeName = ref('1')
const crud = ref()
const tabs = [
  { label: '尊老金', name: '1', component: HonorOldGold },
  { label: '机构运营补贴', name: '2',component:InstitutionOperationSubsidies },
  { label: '医疗机构补贴', name: '3',component:MedicalInstitutionalSubsidies },
  { label: '从业人员补贴', name: '4',component:PractitionerPersonnelSubsidies },
  { label: '老年大学补贴', name: '5',component:OldUniversitySubsidies },
  { label: '“五类老人”入住机构补贴', name: '6',component:FiveCategoriesOldSubsidies },
  { label: '等级提升补贴', name: '7',component:LevelUpSubsidies },
  { label: '家庭养老床位运营补贴',name:'8',component:HomeBedSubsidy},
  { label: '机构养老床位建设补贴',name:'9',component: BedConstructionSubsidies },
]
let tabName = ref('1')
const onTabClick = (tab) => {
  tabName = tab.props.name
  // nextTick(() => {
  //   crud.value.refreshChange({ dataType: tab.props.name })
  // })
}
</script>

<style scoped></style>
